/* eslint-disable semi */
/* eslint-disable semi */
/* eslint-disable quotes */
<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div class="banner" ref="scroll">

      <van-tabs v-model="activeName" @click="onClick" color=#37CD87 title-active-color=#37CD87>

        <van-tab title="乌金猪">
          <van-list class="help-son" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div class="hello-4" v-for="(itemlist, index) in Piglist" :key="index" :class="[itemlist.id !=0? 'gray':'']"
              @click="showDetails(itemlist.id)">
              <div class="hello-4-top" :class="[itemlist.id !=0? 'onlygray':'']">
                <div class="hello-4-top-left">
                  <img :src="itemlist.imgSrc" alt />
                </div>
                <div class="hello-4-top-right">
                  <p class="pig" :class="[itemlist.id !=0? 'gray':'']">{{itemlist.Pig}}</p>
                  <div class="secend">
                    <van-tag class="date">{{itemlist.Date}}</van-tag>
                    <van-tag class="recive" color="#FFBA68" :class="[itemlist.stock !=0?'':'gray']"
                      v-if="itemlist.bonus_type==1">认养
                    </van-tag>
                    <van-tag class="recive" color="#FFBA68" :class="[itemlist.stock !=0?'':'gray']"
                      v-else-if="itemlist.bonus_type==2">产品</van-tag>

                    <van-tag class="recive" color="#FFBA68" :class="[itemlist.stock !=0?'':'gray']" v-else>认养</van-tag>

                  </div>
                </div>
                <div class="hello-4-top-last" :class="[itemlist.id !=0? '':'close']">
                  <img :src="itemlist.imgSrcover" alt />
                </div>
              </div>
              <div class="hello-4-bottom">
                <div class="show-one">
                  <div class="show-one-1">
                    <h4>{{itemlist.Percentage}}</h4>
                    <p class="color-2">认养分红</p>
                  </div>
                  <div class="show-one-2">
                    <h4>{{itemlist.Money}}</h4>
                    <p class="color-2 adddistance">金额(元/头)</p>
                  </div>
                  <div class="show-one-3">
                    <h4 id="show-num">{{itemlist.Month}}</h4>
                    <p class="color-2">期限(月)</p>
                  </div>
                </div>
                <div class="length">
                  <van-progress color="#75DEA7" :percentage="itemlist.Schedule" style="height: 0.213rem;" />
                </div>
              </div>
            </div>
            <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
          </van-list>

        </van-tab>

      </van-tabs>

      <Tab-Bar :logeid="num"></Tab-Bar>
    </div>
  </van-pull-refresh>
</template>

<script>
import TabBar from "./TabBar.vue";
import https from "./https.js";
import { _debounce, _throttle } from "./untils.js";
export default {
  components: {
    TabBar
  },
  data() {
    return {
      num: 1,
      isLoading: false,
      loading: false,
      finished: false,
      active: 0,
      activeName: "a",
      Piglist: [
        // {
        //   id: 0,
        //   Pig: "乌金猪",
        //   Date: "第1期",
        //   Way: "认养",
        //   Percentage: "36.00%",
        //   Money: "5100.00",
        //   Month: "8",
        //   Schedule: 74,
        //   imgSrc: require("../assets/images/a11.jpg"),
        //   imgSrcover: require("../assets/images/a13.png")
        // },
        // {
        //   id: 1,
        //   Pig: "乌金猪",
        //   Date: "第2期",
        //   Way: "认养",
        //   Percentage: "36.00%",
        //   Money: "5000.00",
        //   Month: "8",
        //   Schedule: 100,
        //   imgSrc: require("../assets/images/a11.jpg"),
        //   imgSrcover: require("../assets/images/a13.png")
        // },
        // {
        //   id: 3,
        //   Pig: "乌金猪",
        //   Date: "第2期",
        //   Way: "认养",
        //   Percentage: "36.00%",
        //   Money: "5000.00",
        //   Month: "8",
        //   Schedule: 100,
        //   imgSrc: require("../assets/images/a11.jpg"),
        //   imgSrcover: require("../assets/images/a13.png")
        // }
      ]
    };
  },

  mounted() {
    // 上拉加载
    window.addEventListener("scroll", this.onScroll);

    //初始化页面自执行轻提示框
    this.addtoast();
  },

  created() {
    let Urlimg = "http://yyl.kmmyxb.cn/pic/";
    let params2 = {
      limit: "10",
      page: "1",
      cate_code: "13761837",
      title: ""
    };
    // this.RequestApi("api/getproductlist", params2, this.Piglist, Urlimg);

    this.MockRequestApi("api/pigList", "", this.Piglist, "");
  },

  methods: {
    //切换标签栏
    onClick(name, title) {
      console.log(title);
    },

    //*******/请求模拟数据
    //MockRequestApi  模拟数据接口
    MockRequestApi(Url, Params, PiglistName, Urlimg) {
      https
        .fetchGet(Url, Params)
        .then(res => {
          //console.log(res);
          let newData = res.data.data;
          switch (newData.code) {
            case 1001:
              console.log("查询成功!");
              console.log(newData.result);

              for (let i = 0; i < newData.result.length; i++) {
                console.log(newData.result[0]);
                if (i == 3) {
                  for (let j = 0; j < newData.result[i].Piglist.length; j++) {
                    let Piglist = newData.result[i].Piglist;
                    PiglistName.push({
                      id: Piglist[j].id,
                      Pig: Piglist[j].Pig,
                      Date: Piglist[j].Date,
                      Way: Piglist[j].Way,
                      Percentage: Piglist[j].Percentage,
                      Money: Piglist[j].Money,
                      Month: Piglist[j].Month,
                      Schedule: Piglist[j].Schedule,
                      imgSrc: require("../assets/images/" +
                        Piglist[j].imgSrc +
                        ".jpg"),
                      imgSrcover: require("../assets/images/" +
                        Piglist[j].imgSrcover +
                        ".png")
                    });
                  }
                }
              }

              break;
            case 1002:
              console.log("查询失败1!");
              break;
            default:
              console.log("错误1!");
              break;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    //请求数据接口封装
    // RequestApi(Url, Params, Name, Urlimg) {
    //   https
    //     .fetchGet(Url, Params)
    //     .then(res => {
    //       console.log(res.data.code);
    //       let newData = res.data;

    //       switch (newData.code) {
    //         case 1001:
    //           console.log("查询成功!");
    //           switch (newData.result) {
    //             case newData.result:
    //               console.log("数据存在!");

    //               if (Name == this.Piglist) {
    //                 for (let i = 0; i < newData.result.data.length; i++) {
    //                   this.Piglist.push({
    //                     id: 0,
    //                     Pig: newData.result.data[0].title,
    //                     Date: "第" + newData.result.data[0].num_per + "期",
    //                     Way: newData.result.data[0].unit,
    //                     Percentage:
    //                       newData.result.data[0].forecast_year_bonus + "%",
    //                     Money: newData.result.data[0].price,
    //                     Month: newData.result.data[0].term,
    //                     imgSrc: Urlimg + newData.result.data[0].picture,
    //                     more_picture:
    //                       Urlimg + newData.result.data[0].more_picture,
    //                     Schedule: 96,

    //                     cash_bonus_bl: newData.result.data[0].cash_bonus_bl,
    //                     product_bonus_bl: newData.result.data[0].title,
    //                     cash_product_bonus_bl:
    //                       newData.result.data[0].cash_product_bonus_bl,
    //                     stock: newData.result.data[0].stock,
    //                     unit: newData.result.data[0].unit,
    //                     bonus_type: newData.result.data[0].bonus_type
    //                   });
    //                   this.Piglist.push({
    //                     id: 0,
    //                     Pig: newData.result.data[0].title,
    //                     Date: "第" + newData.result.data[0].num_per + "期",
    //                     Way: newData.result.data[0].unit,
    //                     Percentage:
    //                       newData.result.data[0].forecast_year_bonus + "%",
    //                     Money: newData.result.data[0].price,
    //                     Month: newData.result.data[0].term,
    //                     imgSrc: Urlimg + newData.result.data[0].picture,
    //                     more_picture:
    //                       Urlimg + newData.result.data[0].more_picture,
    //                     Schedule: 96,

    //                     cash_bonus_bl: newData.result.data[0].cash_bonus_bl,
    //                     product_bonus_bl: newData.result.data[0].title,
    //                     cash_product_bonus_bl:
    //                       newData.result.data[0].cash_product_bonus_bl,
    //                     stock: newData.result.data[0].stock,
    //                     unit: newData.result.data[0].unit,
    //                     bonus_type: newData.result.data[0].bonus_type
    //                   });
    //                 }
    //                 console.log(this.Piglist);
    //               }

    //               break;
    //             default:
    //               console.log("错误!");
    //               break;
    //           }
    //           break;
    //         case 1002:
    //           console.log("查询失败1!");
    //           break;
    //         default:
    //           console.log("错误1!");
    //           break;
    //       }
    //     })
    //     .catch(err => {
    //       console.log(err);
    //     });
    // },

    //vant 加载列表方法
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 1; i++) {
          // this.Piglist.push(this.Piglist.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.Piglist.length > 0) {
          this.finished = true;
        }
      }, 500);
    },

    onClick(name, title) {
      this.goods();
    },
    //获取商品接口 上拉加载
    goods: _throttle(function() {
      this.Piglist.length = 0;

      let Urlimg = "http://yyl.kmmyxb.cn/pic/";

      let params2 = {
        limit: "10",
        page: "1",
        cate_code: "13761837",
        title: ""
      };
      //("api/getproductlist", params2, this.Piglist, Urlimg);
    }, 200),
    //上拉加载
    onRefresh() {
      // this.$toast.loading({
      //   message: "加载中...",
      //   duration: 30000
      // });
      setTimeout(() => {
        // this.$toast("刷新成功");
        this.isLoading = false;
        this.count++;
        this.goods();
      }, 500);
    },

    onScroll() {
      //可滚动容器的高度
      this.LastTime();
    },

    showDetails(id) {
      if (id == 0) {
        this.$router.push({ path: "/PigDetails" });
      }
    },

    addtoast() {
      const toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中..."
      });

      let second = 1;
      const timer = setInterval(() => {
        second--;
        if (second) {
          toast.message = `加载中...`;
        } else {
          clearInterval(timer);
          // 手动清除 Toast
          toast.clear();
        }
      }, 1000);
    },

    //函数防抖 （只执最后一次点击）多用于频繁点击
    LastTime: _debounce(function() {
      let innerHeight = this.$refs.scroll.clientHeight;
      //屏幕尺寸高度
      let outerHeight = document.documentElement.clientHeight;
      //可滚动容器超出当前窗口显示范围的高度
      let scrollTop = document.documentElement.scrollTop;
      //scrollTop在页面为滚动时为0，开始滚动后，慢慢增加，滚动到页面底部时，出现innerHeight < (outerHeight + scrollTop)的情况，严格来讲，是接近底部。
      //console.log(innerHeight + " " + outerHeight + " " + scrollTop);
      if (innerHeight <= outerHeight + scrollTop) {
        //加载更多操作
        let params2 = {
          limit: "10",
          page: "1",
          cate_code: "13761837",
          title: ""
        };
        let Urlimg = "http://yyl.kmmyxb.cn/pic/";

        this.Piglist.length = 0;
        console.log(this.Piglist);
        //this.RequestApi("api/getproductlist", params2, this.Piglist, Urlimg);

        if (this.Piglist.length > 0) {
          this.finished = true;
        }
      }
    }, 200)
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
body {
  background-color: #f6f6f6;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  display: block;
}
div {
  display: block;
  box-sizing: border-box;
}
.banner {
  width: 100%;
  height: 100%;
}
.van-tabs__line {
  background-color: #37cd87;
}

.help-son {
  padding: 10px 10px 0 10px;
}
.hello-4 {
  height: 181.25px;
  border-radius: 10px;
  overflow: hidden;

  background: #ffffff;
  margin-bottom: 10px;
}
.hello-4-top {
  padding-top: 10px;
  padding-left: 10px;
  width: 100%;
  height: 80px;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 3%;
}

.hello-4-top-left {
  width: 58px;
  height: 58px;
}
.hello-4-top-left img {
  width: 58px;
  height: 58px;
}

.hello-4-top-right {
  width: 106.69px;
  height: 60px;
  text-align: left;
  padding-left: 12px;
}

.hello-4-top-last {
  width: 58px;
  height: 58px;
  margin-left: 105px;
}
.hello-4-top-last img {
  width: 58px;
  height: 58px;
}

.pig {
  width: 100%;
  font-size: 16px;
  color: #333;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.secend {
  display: flex;
  padding-top: 10px;
}
.date {
  width: 36.69px;
  height: 20px;
  text-align: center;
  padding-left: 5px;
  background-color: rgb(233, 92, 111);
  color: #fff;
  margin-right: 10px;
}
.recive {
  width: 30px;
  height: 20px;
  text-align: center;
  padding-left: 5px;
  margin-right: 10px;
  color: #fff;
  background-color: #fff;
}

.hello-4-bottom {
  width: 100%;
  padding: 3%;
}
.show-one {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
h4 {
  color: #e95c6f;
  font-size: 18px;
}
.color-2 {
  color: #8a8a8a;
}
.adddistance {
  text-align: center;
  width: 100%;
}
.show-one-1 {
  width: 33.33%;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  text-align: left;
}
.show-one-2 {
  width: 33.33%;
  display: flex;
  flex-flow: row wrap;
  text-align: center;
  justify-content: flex-start;
}
.show-one-3 {
  width: 33.33%;
  display: flex;
  flex-flow: row wrap;
  text-align: center;
  padding-left: 65px;
  justify-content: flex-start;
}
h4 {
  color: #e95c6f;
  font-size: 16px;
  margin-bottom: 5px;
  clear: both;
  width: 100%;
  display: block;
  font-weight: bold;
}

.length {
  width: 100%;
  height: 40px;
  padding-top: 20px;
}
.hello-5 {
  display: flex;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 60px;
  margin: auto;
  background: #fff;
}
.hello-5-all {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}
.hello-5-bottom {
  width: 20%;
  display: flex;
}

.Size {
  width: 25.984px;
  height: 25.984px;
}

.gray {
  color: gray;
  filter: grayscale(100%);
  opacity: 0.5;
}
.onlygray {
  color: gray;
}
.close {
  display: none;
}
</style>

